<template>
    <div class="header">
        <div class="box">
            <img src="@/assets/homeImg/logo.0940ebb5.png" class="img">
            <common></common>
            <span class="span">
                <i class="iconfont icon-search"></i>
                <input type="text" placeholder="搜一搜">
                <i class="iconfont icon-cart" @click="$router.push('/cart')">
                    <span style="color:white; font-size: 12px;"
                        class="getters">{{ $store.getters['cart/changeList'] }}</span>
                </i>

                <div class="layer">
                    <div class="list">
                        <div class="item" v-for="(item, key) in list" :key="key">
                            <RouterLink to="">
                                <img :src="item.picture" alt="">
                                <div class="center">
                                    <p class="name ellipsis-2">{{ item.name }}</p>
                                    <p class="attr ellipsis">{{ item.attrsText }}</p>
                                </div>
                                <div class="right">
                                    <p class="price">&yen;{{ item.nowPrice }}</p>
                                    <p class="count">x{{item.count}}</p>
                                </div>
                            </RouterLink>
                            <i class="iconfont icon-close-new" @click="dels(key)"></i>
                        </div>
                    </div>
                    <div class="foot">
                        <div class="total">
                            <p>共 {{ $store.getters["cart/changeList"] }} 件商品</p>
                            <p>&yen;{{ $store.getters["cart/sumPrice2"] }}</p>
                        </div>
                        <button class="btn1" @click="$router.push('/cart')">去购物车结算</button>
                    </div>
                </div>
            </span>
        </div>
    </div>
</template>



<script>
import common from '@/components/appHome/CommonView.vue'
import { mapMutations } from "vuex"
export default {
    components: { common },
    data() {
        return {
            flag: false
        }
    },
    methods: {
        ...mapMutations("cart", ["del"]),
        // 单个删除
        dels (key) {
            this.$confirm({ text: "温馨提示", message: "你确定要删除吗?" }).then(() => {
                console.log("确定了");
                this.del(key)
            }).catch(() => {
                console.log("取消了");
            })
        },
    },
    computed: {
        list() {
            return this.$store.state.cart.list
        }
    },
    mounted() {
        this.$store.dispatch('getCate')
    }
}
</script>

<style lang="scss">
@import '@/assets/css/variables.scss';

.header {
    width: 100%;
    height: 132px;

    .box {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // position: relative;

        .img {
            height: 80px;
        }

        .span {
            width: 187px;
            height: 28px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid #e7e7e7;

            &:hover {
                .layer {
                    opacity: 1;
                    transform: none
                }
            }

            .icon-cart {
                position: relative;
            }

            i {
                font-size: 22px;
            }

            input {
                box-sizing: border-box;
                height: 25px;
                border: none;
                outline: none;
            }
        }
    }
}

.getters {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    position: absolute;
    right: -3px;
    top: -3px;
    text-align: center;
    line-height: 15px;
}




.layer {
    z-index: 999;
    opacity: 0;
    transition: all .4s .2s;
    transform: translateY(-200px) scale(1, 0);
    width: 400px;
    height: 400px;
    position: absolute;
    top: 150px;
    right: 120px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: #fff;
    border-radius: 4px;
    padding-top: 10px;

    &::before {
        content: "";
        position: absolute;
        right: 14px;
        top: -10px;
        width: 20px;
        height: 20px;
        background: #fff;
        transform: scale(0.6, 1) rotate(45deg);
        box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
    }

    .foot {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 70px;
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        background: #f8f8f8;
        align-items: center;

        .total {
            padding-left: 10px;
            color: #999;

            p {
                &:last-child {
                    font-size: 18px;
                    color: $priceColor;
                }
            }
        }

        .btn1 {
            width: 180px;
            height: 50px;
            border: none;
            border: 1px solid #27ba9b;
            color: #27ba9b;
            background: #e6faf6
        }
    }
}

.list {
    height: 310px;
    overflow: auto;
    padding: 0 10px;

    &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    &::-webkit-scrollbar-track {
        background: #f8f8f8;
        border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
        background: #eee;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #ccc;
    }

    .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
        position: relative;

        i {
            position: absolute;
            bottom: 38px;
            right: 0;
            opacity: 0;
            color: #666;
            transition: all .5s;
        }

        &:hover {
            i {
                opacity: 1;
                cursor: pointer;
            }
        }

        a {
            display: flex;
            align-items: center;

            img {
                height: 80px;
                width: 80px;
            }

            .center {
                padding: 0 10px;
                width: 200px;

                .name {
                    font-size: 16px;
                }

                .attr {
                    color: #999;
                    padding-top: 5px;
                }
            }

            .right {
                width: 100px;
                padding-right: 20px;
                text-align: center;

                .price {
                    font-size: 16px;
                    color: $priceColor;
                }

                .count {
                    color: #999;
                    margin-top: 5px;
                    font-size: 16px;
                }
            }
        }
    }
}
</style>